<template>
  <div class="app-container">
    <!-- 操作区-->
    <!-- <div class="filter-container">
      <el-form ref="searchForm" size="mini" style="text-align:right">
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" @click="editConfirm">保存</el-button>
        </el-form-item>
      </el-form>
    </div>-->

    <div class="filter-container">
      <el-form ref="form" :model="form" :rules="rules" inline size="mini" label-width="100px">
        <el-collapse v-model="model">
          <el-collapse-item title="基础信息" name="1">
            <!-- <div class="searchform"> -->
            <el-form-item label="代理商代码" prop="dealer_code">
              <el-input
                v-model="form.dealer_code"
                size="mini"
                class="search-input"
                placeholder="代理商代码"
                disabled
              />
            </el-form-item>
            <el-form-item label="代理商名称" prop="dealer_name">
              <el-input
                v-model="form.dealer_name"
                size="mini"
                style="width:415px;"
                placeholder="代理商名称"
                disabled
              />
            </el-form-item>
            <el-form-item label="代理商简称" prop="dealer_shortname">
              <el-input
                v-model="form.dealer_shortname"
                size="mini"
                class="search-input"
                placeholder="代理商简称"
                disabled
              />
            </el-form-item>
            <el-form-item label="企业性质" prop="property">
              <r-select v-model="form.property" type="1010" class="search-input" disabled/>
              <!-- <el-input v-model="form.property" size="mini" class="search-input" placeholder="企业性质"/> -->
            </el-form-item>
            <el-form-item label="建站日期" prop="created_date">
              <el-date-picker
                v-model="form.created_date"
                class="search-input"
                size="mini"
                type="date"
                placeholder="建站日期"
                disabled
              />
            </el-form-item>
            <el-form-item label="开业日期" prop="open_date">
              <el-date-picker
                v-model="form.open_date"
                class="search-input"
                size="mini"
                type="date"
                placeholder="开业日期"
                disabled
              />
            </el-form-item>
            <el-form-item label="营业状态">
              <r-select v-model="form.dealer_status" type="1011" class="search-input" disabled/>
            </el-form-item>
            <el-form-item label="省份" prop="province">
              <el-select
                v-model="form.province"
                placeholder="请选择"
                class="search-input"
                disabled
                @change="changeProvince"
              >
                <el-option
                  v-for="item in provinceOptions"
                  :key="item.region_id"
                  :label="item.region_name"
                  :value="item.region_id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="城市" prop="city">
              <el-select
                v-model="form.city"
                placeholder="请选择"
                class="search-input"
                disabled
                @change="changeCity"
              >
                <el-option
                  v-for="item in cityOptions"
                  :key="item.region_id"
                  :label="item.region_name"
                  :value="item.region_id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="区县" prop="county">
              <el-select v-model="form.county" placeholder="请选择" class="search-input" disabled>
                <el-option
                  v-for="item in countyOptions"
                  :key="item.region_id"
                  :label="item.region_name"
                  :value="item.region_id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="营业时间" prop="businessHours">
              <el-input
                v-model="form.businessHours"
                class="search-input"
                size="mini"
                placeholder="营业时间"
                disabled
              />
            </el-form-item>
            <el-form-item label="代理商星级">
              <r-select v-model="form.dealerStarLevel" type="1089" class="search-input" disabled/>
            </el-form-item>
            <!-- </div> -->
          </el-collapse-item>
          <el-collapse-item title="联系方式" name="2">
            <!-- <div class="searchform"> -->
            <el-form-item label="24小时热线" prop="hotLine">
              <el-input v-model="form.hotLine" class="search-input" size="mini" placeholder="24小时热线"/>
            </el-form-item>
            <el-form-item label="销售热线" prop="salesLine">
              <el-input v-model="form.salesLine" class="search-input" size="mini" placeholder="销售热线"/>
            </el-form-item>
            <el-form-item label="售后热线" prop="serviceLine">
              <el-input
                v-model="form.serviceLine"
                class="search-input"
                size="mini"
                placeholder="售后热线"
              />
            </el-form-item>
            <el-form-item label="E-MAIL" prop="eMail">
              <el-input v-model="form.eMail" size="mini" class="search-input" placeholder="E-MAIL"/>
            </el-form-item>
            <el-form-item label="邮编" prop="zipCode">
              <el-input v-model="form.zipCode" size="mini" class="search-input" placeholder="邮编"/>
            </el-form-item>
            <el-form-item label="传真" prop="fax">
              <el-input v-model="form.fax" size="mini" class="search-input" placeholder="传真"/>
            </el-form-item>
            <el-form-item label="微信注册手机" prop="wechatPhone">
              <el-input v-model="form.wechatPhone" size="mini" class="search-input" placeholder="微信注册手机"/>
            </el-form-item>
            <el-form-item label="短信接收手机" prop="smsPhone">
              <el-input v-model="form.smsPhone" size="mini" class="search-input" placeholder="短信接收手机"/>
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input v-model="form.address" size="mini" style="width:415px;" placeholder="地址"/>
            </el-form-item>

            <el-form-item label="公司主页" prop="companyHomepage">
              <el-input
                v-model="form.companyHomepage"
                size="mini"

                placeholder="公司主页"
                style="width:415px;"
              />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" size="mini" style="width:415px;" placeholder="备注"/>
            </el-form-item>
            <!-- </div> -->
          </el-collapse-item>
          <el-collapse-item title="健康档案" name="3">
            <!-- <div class="searchform"> -->
            <el-form-item label="厂家用户名" prop="userName" label-width="415px" >
              <el-input v-model="form.userName" size="mini" class="search-input" disabled/>
            </el-form-item>
            <el-form-item label="密码" prop="password" label-width="100px">
              <el-input v-model="form.password" size="mini" class="search-input" disabled/>
            </el-form-item>
            <el-form-item label="维修企业唯一标识" prop="uniqueCode" label-width="415px">
              <el-input
                v-model="form.uniqueCode"
                size="mini"
                style="width:415px;"
                placeholder="维修企业唯一标识"
                disabled
              />
            </el-form-item>
            <el-form-item label="接口调用凭证URL" prop="url1" label-width="415px">
              <el-input v-model="form.url1" size="mini" style="width:415px;" placeholder="接口调用凭证URL" disabled/>
            </el-form-item>
            <el-form-item label="维修企业唯一标识URL" prop="url2" label-width="415px">
              <el-input
                v-model="form.url2"
                size="mini"
                style="width:415px;"
                placeholder="维修企业唯一标识URL"
                disabled
              />
            </el-form-item>
            <el-form-item label="批量新增电子健康档案URL" prop="url3" label-width="415px">
              <el-input
                v-model="form.url3"
                size="mini"
                style="width:415px;"
                placeholder="批量新增电子健康档案URL"
                disabled
              />
            </el-form-item>
            <el-form-item label="道路经营/机动车维修经营许可证号" prop="license" label-width="415px">
              <el-input
                v-model="form.license"
                size="mini"
                style="width:415px;"
                placeholder="道路经营/机动车维修经营许可证号"
              />
            </el-form-item>
            <!-- </div> -->
          </el-collapse-item>
        </el-collapse>
      </el-form>
      <br>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="editConfirm">保 存</el-button>
      </div>
      <br>
    </div>
  </div>
</template>

<script>
import { getJsonTree } from '@/utils/index'
import { getDealer, updateDealer } from '@/api/admin/org/dealerInfo'
import formMixins from '@/mixins/formMixins'
import rSelect from '@/components/Select/Select'
import _ from 'lodash'
import { mapGetters } from 'vuex'
import { fax, mobilePhone, email, zipCode, phone } from '@/utils/validator'
export default {
  name: 'DealersBasicInfo',
  components: {
    rSelect
  },
  // 过滤器
  filters: {
    isactiveFilter(val) {
      return val === 'Y' ? '有效' : '无效'
    }
  },
  mixins: [formMixins],
  data() {
    return {
      model: ['1', '2', '3'],
      form: {},
      rules: {
        // province: [{ required: true, message: '请选择省份', trigger: 'blur' }],
        // city: [{ required: true, message: '请选择城市', trigger: 'blur' }],
        // county: [{ required: true, message: '请选择区县', trigger: 'blur' }],
        hotLine: [
          { required: true, message: '请填写24小时热线', trigger: 'blur' },
          { trigger: 'blur', validator: mobilePhone }
        ],
        salesLine: [
          { required: true, message: '请填写销售热线', trigger: 'blur' },
          { trigger: 'blur', validator: mobilePhone }
        ],
        serviceLine: [
          { required: true, message: '请填写售后热线', trigger: 'blur' },
          { trigger: 'blur', validator: mobilePhone }
        ],
        license: [{ required: true, message: '道路经营/机动车维修经营许可证号', trigger: 'blur' }],
        eMail: [{ required: true, message: '请填写E-MAIL', trigger: 'blur' },
          { trigger: 'blur', validator: email }],
        zipCode: [{ required: true, message: '请填写邮编', trigger: 'blur' },
          { trigger: 'blur', validator: zipCode }],
        fax: [{ required: true, message: '请填写传真', trigger: 'blur' },
          { trigger: 'blur', validator: fax }],
        wechatPhone: [
          { trigger: 'blur', validator: phone }
        ],
        smsPhone: [
          { trigger: 'blur', validator: phone }
        ]
      },
      provinceOptions: [],
      cityOptions: [],
      countyOptions: []
    }
  },
  computed: {
    ...mapGetters(['dictMap', 'regionMap'])
  },
  mounted() {
    this.searchHandle()
    // log('dictMap:',this.dictMap);
    const array = Object.values(this.regionMap)
    this.provinceOptions = array
  },
  methods: {
    // tree转换
    treeToJson(tree) {
      return getJsonTree(tree)
    },
    // 查询
    searchHandle() {
      this.$nextTick(() => {
        this.$refs.from.clearValidate()
      })
      getDealer()
        .then(res => {
          res.province = Number(res.province)
          res.city = Number(res.city)
          res.county = Number(res.county)
          res.eMail = res.e_mail
          res.hotLine = res.hot_line
          res.zipCode = res.zip_code
          res.salesLine = res.sales_line
          res.serviceLine = res.service_line
          res.uniqueCode = res.unique_code
          res.userName = res.user_name
          res.wechatPhone = res.wechat_phone
          res.smsPhone = res.sms_phone
          res.companyHomepage = res.company_homepage
          res.dealerStarLevel = res.dealer_star_level
          this.form = _.cloneDeep(res)
          this.setOptions()
        })
        .catch(err => {
          // table.complete()
        })
    },
    // 修改确认
    editConfirm(dialog) {
      this.$refs['form'].validate(valid => {
        if (valid) {
          updateDealer(this.form)
            .then(() => {
              this.$message({
                type: 'success',
                message: '保存成功!'
              })
              this.searchHandle()
            })
            .catch(err => {
              // this.$message({
              //   type: 'error',
              //   message: err.response.data.errorMsg
              // })
            })
        }
      })
    },

    changeProvince() {
      const p = this.form.province
      this.cityOptions = this.regionMap[p].children
      // log(this.cityOptions)
      this.form.city = ''
      this.form.county = ''
    },
    changeCity() {
      const p = this.form.province
      const c = this.form.city
      // log('s:', this.form.city)
      this.form.county = ''
      this.countyOptions = this.regionMap[p].children[c].children
      // log(this.countyOptions)
    },
    setOptions() {
      const p = this.form.province
      this.cityOptions = this.regionMap[p].children
      const c = this.form.city
      this.countyOptions = this.regionMap[p].children[c].children
    }
  }
}
</script>

<style scoped>

</style>
